<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar title="评论" left-arrow @click-left="$router.go(-1)" fixed />

    <!-- 评论 -->
    <div class="container">
      <van-pull-refresh
        v-model="isLoading"
        success-text="加载成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="main" v-for="item in commentList" :key="item.commentId">
            <div class="left">
              <div class="picture">
                <van-image fit="cover" :src="item.user.avatarUrl" />
              </div>
              <div class="commentInfo">
                <p class="name">{{ item.user.nickname }}</p>
                <p class="time">
                  {{ item.time }} ip：{{ item.ipLocation.location }}
                </p>
                <p class="content">{{ item.content }}</p>
              </div>
            </div>
            <div class="right">
              <p>0点赞</p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getMusicComment } from "@/api/comment";
export default {
  name: "Comment",
  data() {
    return {
      // 评论数据
      commentList: [],
      // 下拉加载完毕
      isLoading: false,
      // 上拉加载完毕
      loading: false,
      // 数据加载完毕
      finished: false,
      // 一页显示多少条数据
      count: 20,
      // 评论页数
      page: 0,
      // 获取第几页评论
      // 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
      offset: (this.page - 1) * this.count
    };
  },
  methods: {
    async loadMusicComment() {
      const { data } = await getMusicComment(this.$route.query.id, this.count, (this.page - 1) * this.count);
      console.log(data.comments)
      if (data.code === 200) {
        // this.commentList.push(data.comments.forEach(item => item))
        data.comments.forEach(item => this.commentList.push(item))
        console.log(data.comments)
        // 记载完毕
        this.isLoading = false
        this.loading = false
      } else {
        console.log("获取歌单评论数据失败！");
      }
    },
    // 下拉刷新
    onRefresh() {
      this.commentList = []
      this.loadMusicComment();
      this.isLoading = false;
    },
    // 上拉刷新
    onLoad() {
      this.page++
      this.loadMusicComment()
      // 加载状态结束
      this.loading = false
      console.log('load执行中')
      // 数据全部加载完成
      if (this.commentList.length >= 70) {
          this.finished = true;
        }
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 50px;
  .main {
    padding: 0 15px;
    margin-bottom: 3px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 80%;
      display: flex;

      .picture {
        /deep/ .van-image__img {
          width: 50px;
          height: 50px;
          line-height: 50px;
          border-radius: 100%;
        }
      }

      .commentInfo {
        margin-left: 12px;
        p {
          margin-bottom: 7px;
        }
        .name {
          font-size: 16px;
          color: #8e8d8d;
        }
        .time {
          font-size: 15px;
          color: #cecece;
        }
        .content {
          font-size: 17px;
          color: #696868;
        }
      }
    }

    .right {
      p {
        font-size: 16px;
        color: #898787;
      }
    }
  }
}
</style>